<template>
  <div class="wanggemianji">
    <div class="top">
      <div class="top-left">
        <P>{{ result.orderCount || '0' }}</P>
        <P style="font-size:16px;color: #ffffff;margin-top: 10px;margin-left: 5px;"> 总受理量（件）</P>
      </div>
      <div class="top-right">
        <P>{{ result.thisYearOrderCount || '0' }}</P>
        <P style="font-size:16px;color: #ffffff;margin-top: 10px;margin-left: 5px;">本年受理量（件）</P>
      </div>
    </div>
    <div class="bigwangge">
      <div class="totle">
        <p>{{ result.thisYearDigitalCount || '0' }}</p>
        <p>本年数字城管类（件）</p>
      </div>
      <div class="totle">
        <p>{{ result.thisYearConvenienceCount || '0' }}</p>
        <p>本年便民类（件）</p>
      </div>
      <div class="totle">
        <p>{{ result.thisYearOtherCount || '0' }}</p>
        <p>本年其他类（件）</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    result: {
      type: Object,
      default: () => { }
    },
  },
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  },
}
</script>
<style lang="less" scoped>
.wanggemianji {
  width: 100%;
  .top {
    height: 150px;
    display: flex;
    margin-top: 51px;
    margin-bottom: 35px;
    text-align: center;
    color: #1AFCFF;
  
    font-size: 20px;
    .top-left {
      flex: 1;
      height: 150px;
      width: 192px;
      padding-top: 20px;
      background-image: url("../../../assets/images/yingpanshidian/kuang1.png");
      background-repeat: no-repeat;
      background-position: center;
    }
    .top-right {
      flex: 1;
      height: 150px;
      width: 192px;
      padding-top: 20px;
      padding-left: -20px;
      background-image: url("../../../assets/images/yingpanshidian/kuang1.png");
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .bigwangge {
    margin: 60px auto;
    .totle {
      background-image: url("../../../assets/images/yingpanshidian/kong2.png");
    }
    &:nth-child(1) {
      width: 462px;
      height: 92px;
      background: linear-gradient(0deg, #1f3b51);
      p {
        text-align: center;
        &:nth-child(1) {
          color: #28a4ff;
          font-size: 44px;
          font-family: DIN;
          font-weight: 400;
          color: #28a4ff;
        }
        &:last-child {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          line-height: 12px;
        }
      }
    }
    &:nth-child(2) {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 33px;
      div {
        margin-left: 7px;
        width: 223.8px;
        height: 92px;
        &:nth-child(1) {
          p {
            &:nth-child(1) {
              font-size: 44px;
              font-family: DIN;
              font-weight: 400;
              color: #ff4e52;
            }
            &:nth-child(2) {
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
        &:nth-child(2) {
          p {
            &:nth-child(1) {
              font-size: 44px;
              font-family: DIN;
              font-weight: 400;
              color: #74c6ff;
            }
            &:nth-child(2) {
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
        &:nth-child(3) {
          p {
            &:nth-child(1) {
              font-size: 44px;
              font-family: DIN;
              font-weight: 400;
              color: #ffbc64;
            }
            &:nth-child(2) {
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }
    }
    
  }
}
</style>
